<template>
    <view class="app-container goods">
        <z-paging ref="paging" v-model="list" @query="queryList">
            <template #top>
                <zzk-nav title="选择商品"></zzk-nav>
            </template>
            <view class="goods-list">
                <view class="goods-item flexrow" v-for="item in list" :key="item.id" @tap="changeGoods(item)">
                    <view class="imgbox">
                        <image class="img" :src="item.pictureOssPath" mode="aspectFill"></image>
                    </view>
                    <view class="text">
                        <text class="name">{{ item.goodsName }}</text>
                        <text class="txt">规格：{{ item.spec }}</text>
                        <text class="txt">库存：{{ item.stock }}</text>
                    </view>
                    <view class="icon">
                        <uni-icons type="checkbox-filled" size="20" color="#f56c6c" v-if="id == item.goodsId"></uni-icons>
                        <uni-icons type="checkbox-filled" size="20" color="#ccc" v-else></uni-icons>
                    </view>
                </view>
            </view>
        </z-paging>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { goodsList } from '@/api/goods.js'
import { backpage } from '@/utils/util'

const paging = ref(null)
const list = ref([])
const id = ref('')

onLoad((option) => {
    id.value = option.id
})

const queryList = (pageNo, pageSize) => {
    const params = {
        page: pageNo,
        size: pageSize,
    }
    goodsList(params).then(res => {
        paging.value.complete(res.records)
    })
}

const changeGoods = (item) => {
    uni.$emit('change', {
        goodsId: item.goodsId,
        goodsName: item.goodsName
    })
    backpage()
}
</script>

<style lang="scss" scoped>
.goods {
    &-list {
        padding: 20rpx $zzk-margin 0;
    }
    &-item {
        padding: 24rpx;
        border-radius: 16rpx;
        margin-bottom: 20rpx;
        background-color: #fff;
        align-items: center;
        .img {
            width: 120rpx;
            height: 120rpx;
            display: block;
            border-radius: 8rpx;
        }
        .text {
            flex: 1;
            padding-left: 20rpx;
        }
        .name {
            font-size: 28rpx;
            line-height: 40rpx;
        }
        .txt {
            font-size: 24rpx;
            color: #999;
            line-height: 40rpx;
        }
    }
}
</style>